<template>
   <div class="con">
      <!-- 展示 -->
      <h3 class="specs">{{ detail.specsname }}</h3>
      <div class="option">
        <span
          :class="index == n ? 'active' : ''"
          @click="n = index"
          v-for="(item, index) in detail.specsattr"
          :key="item"
          >{{ item }}</span
        >
      </div>
      <van-button type="primary" @click="addShop">加入购物车</van-button>
    </div>
</template>

<script>
import { Toast } from 'vant';
import axios from 'axios';
export default {
  props: ["detail"],
  data() {
    return {
      n: 0,
    };
  },
  methods: {
    //加入购物车
    addShop() {
      axios({
        url:"/api/cartadd",
        method:"post",
        data:{
          uid: JSON.parse(localStorage.getItem("userInfo")).uid,
          goodsid: this.detail.id,
          num: 1,
        }

      }).then((res) => {
        if (res.data.code === 200) {
          Toast("添加成功");
        }
        this.$emit("hide");
      });
    },
  },
};
</script>

<style scoped>

.specs {
  font-size: 0.5rem;
  font-weight: 900;
}
.option {
  overflow: hidden;
}
.option span {
  float: left;
  margin: 0.2rem;
  padding: 0.2rem 0.3rem;
  background: #ccc;
  border-radius: 0.1rem;
}
.option .active {
  background: #ff4400;
  color: #fff;
}
</style>